<template>
  <div>
    <a-modal
      title="设置上课时间段"
      :visible="showModel"
      @cancel="hideModal"
      :footer="null"
      style="top: 160px;"
      @confirmLoading="modelLoading"
    >
      <div style="margin-bottom: 16px">
        <a-button type="primary" @click="add">新增上课时间段</a-button>
      </div>
      <div class="classTimeTable" style="height:350px;overflow-y:auto;">
        <div class="classTimeLine" v-for="(item,index) in timeList" :key="index">
          <div>
            <span v-if="item.hideInput">
              <span>{{moment(item.start_time).format('HH:mm')}}-{{moment(item.end_time).format('HH:mm')}}</span>
            </span>
            <span v-else>
              <a-time-picker
                format="HH:mm"
                v-model="item.start_time"
                style="width:150px;"
                placeholder="请选择开始时间"
                :allowClear="false"
              />
              <a-time-picker
                format="HH:mm"
                v-model="item.end_time"
                style="width:150px;margin-left:10px;"
                placeholder="请选择结束时间"
                :allowClear="false"
              />
            </span>
            <!-- {{item}} -->
          </div>
          <div class="action">
            <a title="保存" v-if="!item.id">
              <a-icon type="save" @click="submit(item,index)"></a-icon>
            </a>
            <a title="保存" v-if="!item.hideInput&&item.id">
              <a-icon type="save" @click="edit(item,index)"></a-icon>
            </a>
            <a title="修改" v-if="item.hideInput">
              <a-icon type="edit" @click="changeType(item,index)"></a-icon>
            </a>
            <a title="删除">
              <a-icon type="delete" @click="del(item,index)"></a-icon>
            </a>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import moment from 'moment'
import { subjectList, changeSubject, addSubject, changeSubjectType, delSubject } from '@/api/subject'
import { classTimeList, addClassTime, delClassTime, editClassTime } from '@/api/classTime'

export default {
  name: 'classTime',
  props: {},
  data() {
    return {
      //弹框数据
      showModel: false,
      modelLoading: false,
      classTimeList: [],
      //表格数据
      text: null,
      timeList: []
    }
  },

  created() {
   
  },
  methods: {
    moment,
    add() {
      this.timeList.push({
        start_time: null,
        end_time: null
      })
    },
    changeType(data, index) {
      this.timeList[index].hideInput = false
    },
    submit(data, index) {
      if (data.start_time) {
        if (data.end_time) {
          let params = JSON.parse(JSON.stringify(data))
          params.start_time = moment(params.start_time).format('HH:mm')
          params.end_time = moment(params.end_time).format('HH:mm')
          params.school_id = this.$store.state.user.school
          addClassTime(params)
            .then(res => {
              let result = JSON.parse(JSON.stringify(res))
              result.start_time = moment(result.start_time, 'HH:mm:ss')
              result.end_time = moment(result.end_time, 'HH:mm:ss')
              result.hideInput = true
              this.timeList.splice(index, 1, result)
            })
            .catch(err => {
              this.$message.error(err.data.message || '保存失败,请注意结束时间不能大于开始时间')
            })
        } else {
          this.$message.error('请选择结束时间')
          return
        }
      } else {
        this.$message.error('请选择开始时间')
        return
      }
    },
    edit(data, index) {
      if (data.start_time) {
        if (data.end_time) {
          let params = JSON.parse(JSON.stringify(data))
          params.start_time = moment(params.start_time).format('HH:mm')
          params.end_time = moment(params.end_time).format('HH:mm')
          editClassTime(params, params.id)
            .then(res => {
              let result = JSON.parse(JSON.stringify(res))
              result.start_time = moment(result.start_time, 'HH:mm:ss')
              result.end_time = moment(result.end_time, 'HH:mm:ss')
              result.hideInput = true
              this.timeList.splice(index, 1, result)
            })
            .catch(err => {
              this.$message.error(err.data.message || '修改失败,请注意结束时间不能大于开始时间')
            })
        } else {
          this.$message.error('请选择结束时间')
          return
        }
      } else {
        this.$message.error('请选择开始时间')
        return
      }
    },
    del(data, index) {
      if (data.id) {
        // this.timeTableLoading = true
        delClassTime(data.id)
          .then(res => {
            this.$message.success('删除成功')
            this.timeTableLoading = false
            this.timeList.splice(index, 1)
          })
          .catch(err => {
            this.$message.error(err.data.message || '删除失败')
            this.timeTableLoading = false
          })
      } else {
        this.timeList.splice(index, 1)
      }
    },

    //弹框事件
    showModal() {
      this.showModel = true
      this.getData()
    },
    hideModal() {
      this.showModel = false
      this.$emit('reload')
    },
    getData() {
      classTimeList({ pageSize: 999999, school_id: this.$store.state.user.school })
        .then(res => {
          let params = JSON.parse(JSON.stringify(res.data))
          params.forEach(val => {
            val.start_time = moment(val.start_time, 'HH:mm:ss')
            val.end_time = moment(val.end_time, 'HH:mm:ss')
            val.hideInput = true
          })
          this.timeList = params
          this.timeTableLoading = false
        })
        .catch(err => {
          this.timeTableLoading = false
          this.$message.error(err.data.message || '获取时间失败')
        })
    },
  }
}
</script>
<style lang="less" scoped>
.classTimeTable {
  border: 1px solid #e8e8e8;
  .classTimeLine {
    display: flex;
    padding: 10px 8px;
    width: 100%;
    justify-content: space-between;
    // .timeInterval {
    // }
    .action {
      position: relative;
      top: 5px;
      a {
        margin-right: 20px;
      }
    }
  }
}
</style>